<!--
 * @Descripttion: 用户下拉框选择
 * @version: 1.0
 * @Author: maoyuan
 * @Date: 2022年11月20日21:46:29
 * @LastEditors: 
 * @LastEditTime: 
-->

<template>
	  <!-- <el-tree-select v-model="value" :data="userOptions" :show-checkbox="multiple" :render-after-expand="false" :disable-branch-nodes="true" :props="defaultProps" /> -->
	  <el-cascader v-model="value" :options="options" :props="userprops" @change="cascaderChange" :show-all-levels="false" :readOnly="readOnly" filterable clearable/>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: () => {
					return '请选择'
				}
			},
			multiple:{
				type: Boolean,
				default: false
			},
			readOnly: {
				type: Boolean,
				default: false
			},
			defaultProps: {
				type: Object,
				default: () => {
					return {
						multiple: true,
						checkStrictly: false,  //父子不关联
						emitPath: false,
						children: 'children',
						label: 'label',
						value: 'value',
						expandTrigger: 'hover'
					}
				}
			},
		},
		mounted(){
			this.init();
		},
		data() {
			return {
				value: [],
				options:[],
				userprops: {
					multiple: this.multiple,
					checkStrictly: false,  //父子不关联
					emitPath: false,
					expandTrigger: 'hover'
				},
			}
		},
		methods: {
			async init(){
				var res = await this.$API.system.user.tree.get()
				this.options = res.data;
			},
			//用户级联组件选择事件
			cascaderChange(val){
				if(this.userprops.multiple==false)
				    this.value.push(val);
			}

		}
	}
</script>

<style scoped>
  /* 去除tree上面的一行高度 */
    /* .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        padding: 0;
    } */
	.el-checkbox {
		margin-right: 10px;
	}
</style>
